<template  >
 <el-form :inline="true"  :model="form" label-width="auto"  style="margin-left: 20px; margin-top: 8px;" class="demo-form-inline">
    <el-form-item label="姓名" style="margin-left: 10%;">
      <el-input v-model="form.name" style="width: 120px;" />
    </el-form-item>
    <el-form-item label="状态">
      <el-select v-model="form.region" placeholder="请输入状态"  style="width: 120px;" >
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="时间">
      <el-col :span="11">
        <el-date-picker
          v-model="form.date1"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
      <el-col :span="1" class="text-center">
        <span class="text-gray-300">-</span>
      </el-col>
      <el-col :span="11">
        <el-time-picker
          v-model="form.date2"
          placeholder="Pick a time"
          style="width: 100%"
        />
      </el-col>
    </el-form-item>
    
    
    <el-form-item  >
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button>重置</el-button>
    </el-form-item>
  </el-form>
 


     <el-table stripe="true" border=true 
     show-header=true :data="tableData?.slice((currentPage - 1) * pageSize, currentPage * pageSize)" scrollbar=true style="max-width: 99%;
      max-height: 100%;height: auto; padding-left: 5%; padding-top: 10px; overflow-y: auto" 
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" :index="indexMethod" label="序号" width="70px"/>
        <el-table-column prop="date" label="日期" width="120px" /> 
        <el-table-column prop="name" label="姓名" width="130px"/> 
        <el-table-column prop="state" label="状态" width="150px"/> 
        <el-table-column prop="city" label="城市" width="200px"/> 
        <el-table-column prop="address" label="地址" width="200px" show-overflow-tooltip/> <!--  show-overflow-tooltip 表格显示不下的鼠标放上上浮显示全部  -->
        <el-table-column prop="zip" label="zip" width="200px"/> 
        <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="{ row, $index }">
            <el-button link type="primary" size="small" @click="handleClick(row, $index )">
                删除
            </el-button>
            <el-button link type="primary" size="small" @click="editRow(row)">修改</el-button>
        </template>
        </el-table-column>
        
     </el-table>
     <!-- 分页 -->
     <div class="demo-pagination-block">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50]"
        layout=" sizes, prev, pager, next, jumper,total" :total="tableData?.length" />
    </div>

    <!-- 编辑用户弹窗 -->
     <el-dialog v-model="dialogFormEVisible">
      <el-form ref="userForm2"  :model="formData2" :rules="rules">
        
        <el-form-item label="日期" prop="date">
          <el-input v-model="formData2.date" placeholder="请输入日期" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData2.name" placeholder="请输入用户姓名" />
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-input v-model="formData2.state" placeholder="请输入状态" />
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-input v-model="formData2.city" placeholder="请输入城市" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="formData2.address" placeholder="请输入地址" />
        </el-form-item>
        <el-form-item label="zip" prop="zip">
          <el-input v-model="formData2.zip" placeholder="请输入zip" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="flex">
          <el-button type="primary" @click="submitEForm(userForm2)">确定</el-button>
          <el-button @click="clean">取消</el-button>
        </div>
      </template>

     </el-dialog>

     
</template>

<script lang="ts" setup>
import { dataType } from 'element-plus/es/components/table-v2/src/common.mjs';
import { ref,reactive } from 'vue';
const userForm = ref();
const userForm2 = ref();
// 默认页数
const currentPage = ref(1);
// 分页的默认数
const pageSize = ref(5);

const dialogFormEVisible= ref(false);

const clean =()=>{
  dialogFormEVisible.value = false;
}
 
// 点修改后展示数据
const editRow = (row) => {
  debugger;
      const { index,date, name, state,city,address,zip } = row;
      // 展示编辑表单
      dialogFormEVisible.value = true;
      formData2.index = index;
      formData2.date = date;
      formData2.name = name;
      formData2.state = state;
      formData2.city = city;
      formData2.address = address;
      formData2.zip = zip;
    };

// 修改提交
const submitEForm = (formEl) => {
  debugger;
      formEl.validate((res) => {
        if (!res) {
          return;
        }
        // 提交修改
        // tableData.users[data.formData2.id].email = data.formData2.email;
        // data.users[data.formData2.id].mobile = data.formData2.mobile;
        // data.dialogFormEVisible = false;
        // searchList();
      });
    };

    

const formData2 =  reactive({
          index : "",
          date: "",
          name: "",
          state: "",
          city: "",
          address: "",
          zip: "",
      })
//校验
const   rules= {
        date : [{ required: true, message: "此项为必填", trigger: "blur" }],
        name : [{ required: true, message: "此项为必填", trigger: "blur" }],
        state : [{ required: true, message: "此项为必填", trigger: "blur" }],
        city: [{ required: true, message: "此项为必填", trigger: "blur" }],
      };

// form表单数据绑定
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

//提交  
const onSubmit = () => {
    alert(form.name);
}

const indexMethod = (index: number) => {
  return index + 1
}
const handleClick = (row, index) => {
    tableData.value.splice(index, 1);
}
const edit = () => {
  alert("修改")
}



 

const tableData = ref([
{date: "2016-08-29", name: "Anna", state: "California", city: "Los Angeles", address: "No. 628, Pine St, Los Angeles", zip: "CA 90048"},
    {date: "2016-05-04", name: "Ben", state: "California", city: "Los Angeles", address: "No. 160, Elm St, Los Angeles", zip: "CA 90069"},
    {date: "2016-10-25", name: "Charlie", state: "California", city: "Los Angeles", address: "No. 436, Fir St, Los Angeles", zip: "CA 90029"},
    {date: "2016-01-19", name: "Diana", state: "California", city: "Los Angeles", address: "No. 709, Birch St, Los Angeles", zip: "CA 90011"},
    {date: "2016-07-16", name: "Ethan", state: "California", city: "Los Angeles", address: "No. 881, Willow St, Los Angeles", zip: "CA 90037"},
    {date: "2016-02-24", name: "Fiona", state: "California", city: "Los Angeles", address: "No. 634, Maple St, Los Angeles", zip: "CA 90003"},
    {date: "2016-09-12", name: "George", state: "California", city: "Los Angeles", address: "No. 387, Oak St, Los Angeles", zip: "CA 90056"},
    {date: "2016-06-07", name: "Hannah", state: "California", city: "Los Angeles", address: "No. 756, Spruce St, Los Angeles", zip: "CA 90082"},
    {date: "2016-12-14", name: "Ian", state: "California", city: "Los Angeles", address: "No. 922, Cedar St, Los Angeles", zip: "CA 90070"},
    {date: "2016-04-21", name: "Jackie", state: "California", city: "Los Angeles", address: "No. 590, Pine St, Los Angeles", zip: "CA 90017"},
    {date: "2016-11-08", name: "Katherine", state: "California", city: "Los Angeles", address: "No. 474, Elm St, Los Angeles", zip: "CA 90049"},
    {date: "2016-03-03", name: "Leo", state: "California", city: "Los Angeles", address: "No. 246, Fir St, Los Angeles", zip: "CA 90028"},
    {date: "2016-02-10", name: "Mia", state: "California", city: "Los Angeles", address: "No. 114, Birch St, Los Angeles", zip: "CA 90009"},
    {date: "2016-05-26", name: "Nathan", state: "California", city: "Los Angeles", address: "No. 998, Willow St, Los Angeles", zip: "CA 90065"},
    {date: "2016-09-07", name: "Olivia", state: "California", city: "Los Angeles", address: "No. 785, Maple St, Los Angeles", zip: "CA 90058"},
    {date: "2016-07-31", name: "Paul", state: "California", city: "Los Angeles", address: "No. 321, Oak St, Los Angeles", zip: "CA 90012"},
    {date: "2016-12-28", name: "Quincy", state: "California", city: "Los Angeles", address: "No. 153, Spruce St, Los Angeles", zip: "CA 90044"},
    {date: "2016-01-23", name: "Rachel", state: "California", city: "Los Angeles", address: "No. 667, Cedar St, Los Angeles", zip: "CA 90031"},
    {date: "2016-06-14", name: "Sam", state: "California", city: "Los Angeles", address: "No. 519, Pine St, Los Angeles", zip: "CA 90077"},
    {date: "2016-11-21", name: "Tara", state: "California", city: "Los Angeles", address: "No. 844, Elm St, Los Angeles", zip: "CA 90016"},
    {date: "2016-04-15", name: "Ursula", state: "California", city: "Los Angeles", address: "No. 290, Fir St, Los Angeles", zip: "CA 90026"},
    {date: "2016-08-08", name: "Victor", state: "California", city: "Los Angeles", address: "No. 457, Birch St, Los Angeles", zip: "CA 90059"},
    {date: "2016-03-29", name: "Wendy", state: "California", city: "Los Angeles", address: "No. 723, Willow St, Los Angeles", zip: "CA 90002"},
    {date: "2016-01-06", name: "Xavier", state: "California", city: "Los Angeles", address: "No. 951, Maple St, Los Angeles", zip: "CA 90061"},
    {date: "2016-05-31", name: "Yvonne", state: "California", city: "Los Angeles", address: "No. 364, Oak St, Los Angeles", zip: "CA 90034"},
    {date: "2016-10-20", name: "Zachary", state: "California", city: "Los Angeles", address: "No. 601, Spruce St, Los Angeles", zip: "CA 90079"},
    {date: "2016-07-12", name: "Abraham", state: "California", city: "Los Angeles", address: "No. 178, Cedar St, Los Angeles", zip: "CA 90018"},
    {date: "2016-12-02", name: "Barbara", state: "California", city: "Los Angeles", address: "No. 415, Pine St, Los Angeles", zip: "CA 90040"},
    {date: "2016-02-29", name: "Cameron", state: "California", city: "Los Angeles", address: "No. 873, Elm St, Los Angeles", zip: "CA 90021"},
    {date: "2016-09-24", name: "Daniel", state: "California", city: "Los Angeles", address: "No. 229, Fir St, Los Angeles", zip: "CA 90005"},
    {date: "2016-06-19", name: "Elena", state: "California", city: "Los Angeles", address: "No. 546, Birch St, Los Angeles", zip: "CA 90062"},
    {date: "2016-01-11", name: "Frank", state: "California", city: "Los Angeles", address: "No. 772, Willow St, Los Angeles", zip: "CA 90030"},
    {date: "2016-04-02", name: "Grace", state: "California", city: "Los Angeles", address: "No. 939, Maple St, Los Angeles", zip: "CA 90080"},
    
])
</script>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
.demo-pagination-block+.demo-pagination-block {
  margin-top: 10px;
}
 
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
 
.demo-pagination-block {
  padding: 15px;
  background-color: white;
  display: flex;
  justify-content: center;
}
</style>